<template>
  <div class="test"> 
    <!-- 本人信息  -->
    <el-row :gutter="20">
      <el-col :span="15">
        <el-input
          placeholder="请输入自己的昵称"
          prefix-icon="el-icon-user-solid"
          v-model="name"
          style="margin: 0px 10px"
        >
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button size="small" type="primary" @click="connectWebSocket()"
          >建立连接</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button size="small" type="danger" @click="websockClose()"
          >断开连接</el-button
        >
      </el-col>
      <el-col :span="2">
        <div style="height: 100%">
          <el-tag type="success">频道号：{{ myAisle }}</el-tag>
        </div>
      </el-col>
      <el-col :span="2">
        <div style="height: 100%">
          <el-tag type="success">在线：{{ people_num }}</el-tag>
        </div>
      </el-col>
    </el-row>
    <!-- 本人信息  -->

    <!-- 对方信息  -->
    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="10">
        <el-input
          placeholder="请输入对方频道号"
          prefix-icon="el-icon-phone"
          v-model="aisle"
          style="margin: 0px 10px"
        >
        </el-input>
      </el-col>
    </el-row>
    <!-- 对方信息  -->

    <!-- 消息框  -->
    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="18">
        <el-input
          placeholder="请输入消息"
          prefix-icon="el-icon-s-promotion"
          v-model="messageValue"
          style="margin: 0px 10px"
          @keyup.enter.native="sendMessage()"
        >
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="sendMessage()">发送信息</el-button>
      </el-col>
    </el-row>
    <!-- 消息框  -->

    <!-- 消息列表  -->
    <div class="messageWarp">
      <div v-for="(value, key, index) in messageList" :key="index">
        <el-tag v-if="value.name === name" type="success" style="float: right"
          >我：{{ value.msg }}</el-tag
        >
        <br />
        <el-tag v-if="value.name !== name" style="float: left"
          >{{ value.name }}：{{ value.msg }}</el-tag
        >
        <br />
      </div>
    </div>
    <!-- 消息列表  -->
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      websock: null, // WebSocket对象
      name: "", // 昵称
      aisle: "", // 对方频道号，想要发送消息对别人，就要知道对方的频道
      myAisle: "-1", // 自己频道号
      messageValue: "",
      people_num: 0,
      messageList: [], // 消息列表
    };
  },
  methods: {
    connectWebSocket() {
      if (this.name === "") {
        this.$message({
          showClose: true,
          message: "请输入自己的昵称",
          type: "error",
        });
        return;
      }
      console.log("开始建立连接");
      const url = "ws://192.168.0.30:8282/room/" + this.name;
      this.websock = new WebSocket(url);
      this.websock.onopen = this.websockOpen; // 监听开启
      this.websock.onclose = this.websockClose; //监听关闭
      this.websock.onerror = this.websockError; //监听异常
      this.websock.onmessage = this.websockMessage; //监听服务器发送的消息
    },
    websockOpen() {
      console.log("监听连接建立");
      // 渲染操作
    },
    websockClose() {
      console.log("监听连接关闭");
      // 渲染操作
    },
    websockError() {
      console.log("监听异常");
      // 渲染操作
    },
    websockMessage(e) {
      console.log("监听服务器发来的消息", e.data);
      //const myobj = JSON.parse(e.data);
      let msgObj = eval("(" + e.data + ")");
      if (msgObj.type === 0) {
        // 提示连接成功
        if (this.myAisle === "-1") {
          this.myAisle = msgObj.aisle;
        }
        this.people_num = msgObj.people_num;
      }
      if (msgObj.type === 1) {
        //显示消息
        //console.log("接受消息");
        this.messageList.push(msgObj);
      }
    },
    sendMessage() {
      if (this.aisle === "") {
        this.$message({
          showClose: true,
          message: "请输入对方频道号",
          type: "error",
        });
        return;
      }
      let socketMsg = { msg: this.messageValue, toUser: this.aisle };
      socketMsg.type = 1;
      console.log("向服务器发送信息:" + JSON.stringify(socketMsg));
      this.websock.send(JSON.stringify(socketMsg));
      this.messageValue = "";
    },
    //主动关闭连接
    websockClose() {
      this.websock.close();
    },
  },
  //页面卸载时关闭连接
  destroyed() {
    this.websock.close();
  },
};
</script>

<style scoped>
.test {
  width: 1080px;
  height: 100%;
  margin: 100px auto;
  text-align: center;
  border: 1px #cccc solid;
  border-radius: 5px;
  padding: 20px 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10PX;
}
.messageWarp {
  margin-top: 30px;
}
</style>